import { msg, navTo } from "@/utils/util"
import { getAdvertList }  from "@/api/advert"

Page({

    data: {
        navHeight: 0, // 导航栏的高度
        showSearchInput: false, // 是否显示搜索输入框
        takeType: 1, // 1-到店自取，2-外送上门
        shop: null, //下单店铺
        bannerList: [],
        address: null, //收货地址
        cartList: [], // 购物车中的数据
        totalNum: 0, // 总数量
        totalAmount: 0, //总金额 
        showCartBtn: true, // 默认显示购物车按钮，为实现动画而生，用于获取购物车图片位置
        stickyTop: 0,
        showCart: false, // 是否显示购物车明细弹出层
        animaPosition: { // 加入购物车抛物线坐标信息
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
        },
        currGoods: {}, // 当前点击+的商品
        startAddAnima: false, // 开始抛物线动画
    },

    onShow(){
      const {takeType, shop} = getApp().pageData || {}
    //    console.log('takeType', takeType, shop)
    
      if (takeType) this.setData({ takeType })
      if (shop) this.setData({ shop })
      // 清除
      getApp().pageData = {}
    },

    onLoad() {
        this.loadAdvertList()
    },

    onReady() {
        // 获取 <goods-list> 组件实例
       this.goodsListComponent = this.selectComponent('#goods-list-id')

       // 获取购物车图片所在的坐标信息
       wx.createSelectorQuery().select('.cart-img-view').boundingClientRect(res => {
        //    console.log('res', res)
            this.setData({
                'animaPosition.endX': res.left + res.width/3,
                'animaPosition.endY': res.top,
                showCartBtn: false
            })
       }).exec() // 不要少了exec
    },

    // 页面上拉触底事件的处理函数
    onReachBottom() {
        this.goodsListComponent?.reachBottomLoad()
    },

    // 监听页面滚动事件处理函数
    onPageScroll(e) {
        // console.log('onPageScroll', e)
        // 调用goods-list组件中的pageScrollChangeCategory实现滚动商品列表时,高亮显示对应分类名称.
        this.goodsListComponent?.pageScrollChangeCategory(e)
    },
    
    navTo,

    toSearchPage() {
        navTo('/pages/search/search')
    },

    // 查询 点单页轮播图数据
    async loadAdvertList() {
        // '3' 点单页轮播图
        const { data } = await getAdvertList('3')
        this.setData({ bannerList: data }, this.selectorQueryStickyTop)
    },

    // 点单信息区域吸顶
    scrollShopInfoSticky(e) {
        const { isFixed } = e.detail
        this.setData({ showSearchInput: isFixed })
    },

    // 切换取单类型
    changeTakeType(e) {
        const {takeType} = e.currentTarget.dataset
        this.setData({ takeType })
    },

    // 去选择收货地址页面
    toSelectAddress() {
        // console.log('toSelectAddress')
        const addressId = this.data.address?._id || ''
        navTo('/pages/address-list/address-list?addressId='+addressId, {
            events: { // 添加一个事件,用于获取被打开页面传递到当前页面的数据
                updateAddress: (address) => {
                    console.log('address', address)
                    this.setData({ address })
                }
            }
        })
    },

    // 获取分类列表滚动吸顶时需要使用的距离顶部高度 top=导航栏高度+点单信息区域高度
    selectorQueryStickyTop() {
        wx.createSelectorQuery().select('#shop-info-id').boundingClientRect((res) => {
            // console.log('res', res)
            // 导航栏高度+点单信息区域高度
            this.setData({ stickyTop: this.data.navHeight + res.height })
        }).exec() // 不要少了
    },

    // 子组件触发此方法，更新购物车数据
    updateCartList(e) {
        const { cartList } = e.detail
        // console.log('cartList', cartList)
        this.setData({ cartList })
    },

    closeCart() {
        this.setData({showCart: false})
    },

    // 点击显示或隐藏购物车明细
    handleCart() {
        this.setData({ showCart: !this.data.showCart })
    },

    // 清空购物车
    clearCart() {
        this.setData({ cartList: [], showCart: false})
    },

    // 购物车改变数量
    changeCartNum(e) {
        // console.log('changeCartNum', e)
        // 点击按钮后最新的数字
        const { detail: buyNum } = e
        // 点击的商品下标
        const { index } = e.currentTarget.dataset

        const { cartList } = this.data
        if (buyNum < 1) {
            // 小于1，从购物车移除
            cartList.splice(index, 1)
        } else {
            // 大于等于1， 更新为新数量
            cartList[index].buyNum = buyNum
        }

        // 购物车无商品，则隐藏，有则继续显示
        const showCart = cartList && cartList.length > 0

        this.setData({ cartList, showCart })

    },

    // 点击+号会触发此方法
    startAnimation(e) {
        const event = e.detail
        const { goods } = event.currentTarget.dataset
        // 防止多规格加入购物车时报错
        if (!event.touches || event.touches.length<=0) return 
        const { clientX, clientY } = event.touches[0]

        // console.log('startAnimation', goods, clientX, clientY )
        this.setData({
            'animaPosition.startX': clientX,
            'animaPosition.startY': clientY,
            currGoods: goods,
            startAddAnima: true
        })
    },

    // 抛物线动画结束时触发 
    animationDone() {
        this.setData({startAddAnima: false})
    },

    // 前往订单确认页面
    toOrderConfirm() {
        const { shop, cartList, address, takeType, totalAmount, totalNum } = this.data
        // 1. 校验是否选择消费门店
        if (!shop || !shop._id) return msg('请选择店铺')
        // 2. 校验购物车商品是否为空
        if (!cartList || cartList.length <= 0 ) return msg('购物车不能为空')

        // 隐藏购物明细弹出层
        this.setData({ showCart: false })

        // 3. 封装订单数据
        const orderData = JSON.stringify({
            shop, address, takeType, totalAmount, totalNum, cartList
        })
        // console.log('orderData', orderData)
        // 4. 跳转到订单确认页
        navTo('/pages/order-confirm/order-confirm?orderData='+ orderData, {
            events: {
                clearCartData: () => {
                    // 清空购物车数据
                    this.clearCart()
                }
            }
        })
    }

})